<template>
	<view class="content">

		<view class="right">
			<view class="rightcontent">
				<view class="userInfo">
					<view class="user">
						<view class="avartar-img" style="margin-left: 5px;">
							<u-image shape="circle" :showLoading="true" :src="record.avartarUrl" width="45px"
								height="45px"></u-image>
						</view>
						<view class="username" style="margin-left: 8px;">
							<p>{{record.username}}</p>
							<view class="" style="display: flex;align-items: center;">
								<u-tag size="mini" :text="record.label" type="success" shape="circle"></u-tag>

								<p class="tag">12414粉丝</p>
							</view>

						</view>
					</view>
					<view class="anniu">
						<u-icon name="plus" size="28"></u-icon>
						<p>关注</p>
					</view>
				</view>

				<view class="centercontent" style="display: flex;flex-direction: column;margin-left: 60px;">

					<view class="wenzi" style="margin-top: 8px;">
						<p>{{record.content}}</p>
					</view>


					<view class="pictrueList" style="display: flex;flex-wrap: wrap;">
						<view class="picture" style="margin-top: 3px;margin-left: 2px;"
							v-for="(img,index) in record.imgList" :key="index">
							<u-image :src="img" width="100px" height="100px" shape="square" radius="5"></u-image>
						</view>
					</view>


				</view>
				<view class="buttoncontent"
					style="margin-left: 60px;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view class="share">
						<u-icon name="more-dot-fill" size="28"></u-icon>
					</view>
					<view class="doubleIcon" style="display: flex;justify-content: space-between;align-items: center;position: relative;width: 40%;
    right: 10px;">
						<u-icon @click="gotoComment()" name="chat" size="40">
						</u-icon>
						<p>{{record.commentCount}}</p>
						<u-icon name="thumb-up" size="40" style="margin-bottom: 5px;">
						</u-icon>
						<p style="margin-bottom: 7px;">{{record.likeCount}}</p>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			record: {
				type: Object,
			}
		},
		data() {
			return {
				pageForm: {
					current: 1,
					size: 3,
				}
			}
		},
		methods: {
			async gotoComment() {
				
				uni.navigateTo({
					url: '../../pagesA/comment/comment?communityId='+this.record.id
				})


			},

		}

	}
</script>

<style lang="scss" scoped>
	.userInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.anniu {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 60px;
			height: 30px;
			border-radius: 10px;
			background-color: silver;
			right: 5px;
			font-weight: bold;
		}

		.user {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tag_label {}

			.tag {
				font-size: 12px;
				color: silver;
			}
		}

		.centercontent {
			.pictrueList {
				.pictrue {
					flex-basis: calc(33.33% - 20px);
				}
			}
		}
	}
</style>